<template>
	<!-- 企业资料 -->
	<view class="content display  width-100 displayColumn fontSize font_comm">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">上传企业资料</text>
			</template>
		</u-navbar>

		<view class="fn_content display displayColumn width-100  fontSize font_comm all_item">
			<!--  企业经营类型-->
			<view class="fn_one display  displayColumn displaycenter_jus M-T30">
				<span class="fn_txt1 M-L24">企业经营类型</span>
				<span class="fn_txt2 M-T12 M-L24">请选择企业经营类型</span>
				<view class="fn_one_change display  width-100 displaycenter_aliem M-T20">
					<view class="fn_one_one display  all_item M-L24"
						:style="{background:selectIndex==index ? '#126BC9' :'#EEEEEE'}" v-for="(item,index) in radiolist3"
						:key="index" @click="selectIndex=index">
						<span class="fn_txt3 "
							:style="{color:selectIndex==index ?'#ffffff':'#72778a',fontWeight:selectIndex==index?'600':'400'}">{{item.companyType}}</span>
					</view>
				</view>
			</view>
			<!-- 上传法人实名信息 -->
			<view class="fn_two display displayColumn width_699  M-T20">
				<view class="wdh-100 fn_txt1 M-L24">上传法人实名信息</view>
				<view class="wdh-100 fn_txt2 M-T12 M-L24">上传证件必须与营业执照上法人信息一致</view>
				<view class="rowbox wdh-100 spb" style="margin-top: 20rpx;">
					<view class="columnbox one-pic M-L24" @click="addImg(1)">
						<image v-if="cardr==''" src="/static/img/sfzr.png" mode="widthFix"></image>
						<image v-else :src="cardr" mode="aspectFill"></image>
						上传身份证人像页
					</view>
					<view class="columnbox one-pic M-R24" @click="addImg(2)">
						<image v-if="cardg==''" src="/static/img/sfzg.png" mode="widthFix"></image>
						<image v-else :src="cardg" mode="aspectFill"></image>
						上传身份证国徽页
					</view>
				</view>

			</view>
			<!-- 法人信息 -->
			<view class="fn_three display  displayColumn width-699 M-T20">
				<view class="fn_three_one display  displaycenter_aliem">
					<span class="fn_ttx1 M-L24">法人姓名</span>
					<input type="text" v-model="infos.farenName" style="margin-right: 182rpx;" class="input"
						placeholder="请输入法人姓名" placeholder-class="plc_class" />
				</view>
				<!-- 分割线 -->
				<view class="fengexian M-L24 display M-T30"></view>
				<view class="fn_three_one display  displaycenter_aliem M-T24" @click="show1 = true">
					<span class="fn_ttx1 M-L24">证件类型</span>
					<input type="text" style="margin-right: 182rpx;" v-model="infos.zhengjianType" :disabled="true"
						class="input" placeholder="请输入证件类型" placeholder-class="plc_class" />
				</view>
				<!-- 分割线 -->
				<view class="fengexian M-L24 display M-T30"></view>
				<view class="fn_three_one display  displaycenter_aliem M-T24">
					<span class="fn_ttx1 M-L24">证件号码</span>
					<input type="text" v-model="infos.cardId" style="margin-right: 182rpx;" class="input"
						placeholder="请输入法证件" placeholder-class="plc_class" />
				</view>
				<view class="fengexian M-L24 display M-T30"></view>
				<view class="fn_three_one display  displaycenter_aliem M-T24" @click="changeTime(1)">
					<span class="fn_ttx1 M-L24">企业有效期</span>
					<input type="text" style="margin-right: 50rpx;" v-model="timeList.time1" class="input"
						placeholder="年/月/日" :disabled="true" placeholder-class="plc_class" />
					<uni-icons type="calendar-filled" color="#000" size="24" style="margin-right: 24rpx;"></uni-icons>
				</view>
			</view>
			<!-- 上传执照信息 -->
			<view class="fn_four display  displayColumn width-699 M-T20 ">
				<span class="fnx_ttx1 M-T24 M-L24" style="text-align: left;">上传执照信息</span>
				<span class="fnx_ttx2 M-T12 M-L24" style="text-align: left;">请上传个体户执照或企业执照</span>
				<view class="fn_four_images display displayColumn all_item M-T20 M-L24" @click="addImg(3)">
					<image
						src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/12/07/6d936c624dfa4b7aaa04b03ad5f17d0d.png"
						v-if="infos.zhizhaozhengmian==''" class="imagesss" mode=""></image>
					<image :src="infos.zhizhaozhengmian"  style="width: 100%;height: 100%;" v-else class="imagesss" mode=""></image>
					<span class="fnx_ttx3 M-T24" v-if="infos.zhizhaozhengmian==''">上传执照正面</span>
				</view>
			</view>
			<!-- 企业信息 -->
			<view class="fn_three display  displayColumn width-699 M-T20">
				<view class="fn_three_one display  displaycenter_aliem">
					<span class="fn_ttx1 M-L24">企业名称</span>
					<input v-model="infos.qiyeName" type="text" style="margin-right: 182rpx;" class="input" placeholder="请输入企业名称"
						placeholder-class="plc_class" />
				</view>
				<!-- 分割线 -->
				<view class="fengexian M-L24 display M-T30"></view>
				<view class="fn_three_one display  displaycenter_aliem M-T24">
					<span class="fn_ttx1 M-L24">企业代码</span>
					<input v-model="infos.qiyeCode" type="text" style="margin-right: 182rpx;" class="input" placeholder="请输入发证件"
						placeholder-class="plc_class" />
				</view>
				<view class="fengexian M-L24 display M-T30"></view>
				<view class="fn_three_one display  displaycenter_aliem M-T24" @click="changeTime(2)">
					<span class="fn_ttx1 M-L24">企业有效期</span>
					<input type="text" style="margin-right: 50rpx;" v-model="timeList.time2" class="input"
						placeholder="年/月/日" :disabled="true" placeholder-class="plc_class" />
					<uni-icons type="calendar-filled" color="#000" size="24" style="margin-right: 24rpx;"></uni-icons>
				</view>
				<!-- 分割线 -->
				<view class="fengexian M-L24 display M-T30"></view>
				<view class="fn_three_one display  displaycenter_aliem M-T24">
					<span class="fn_ttx1 M-L24">企业地址</span>
					<input type="text" v-model="infos.qiyeAddress" style="margin-right: 182rpx;" class="input" placeholder="请输入企业所在地址"
						placeholder-class="plc_class" />
				</view>

			</view>
			<!-- 上传执照信息 -->
			<view class="fn_four display  displayColumn width-699 M-T20 ">
				<span class="fnx_ttx1 M-T24 M-L24" style="text-align: left;">上传行业资质</span>
				<span class="fnx_ttx2 M-T12 M-L24" style="text-align: left;">请上传企业行业资质</span>
				<view class="fn_four_images display displayColumn all_item M-T20 M-L24" @click="addImg(4)">
					<image
						src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2024/12/07/6d936c624dfa4b7aaa04b03ad5f17d0d.png"
						v-if="infos.zhizhizhnegmian==''" class="imagesss" mode=""></image>
					<image :src="infos.zhizhizhnegmian" v-else class="imagesss " style="width: 100%;height: 100%;" mode=""></image>

					<span class="fnx_ttx3 M-T24" v-if="infos.zhizhizhnegmian==''">上传资质正面</span>
				</view>
			</view>
			<!-- 资质信息 -->
			<view class="fn_three display  displayColumn width-699 M-T20">
				<view class="fn_three_one display  displaycenter_aliem">
					<span class="fn_ttx1 M-L24">资质名称</span>
					<input v-model="infos.zhizhiName" type="text" style="margin-right: 182rpx;" class="input" placeholder="请输入企业名称"
						placeholder-class="plc_class" />
				</view>
				<!-- 分割线 -->
				<view class="fengexian M-L24 display M-T30"></view>
				<view class="fn_three_one display  displaycenter_aliem M-T24">
					<span class="fn_ttx1 M-L24">许可证编号</span>
					<input type="text" v-model="infos.xukezhengBian" style="margin-right: 182rpx;" class="input" placeholder="请输入法证"
						placeholder-class="plc_class" />
				</view>
				<!-- 分割线 -->
				<view class="fengexian M-L24 display M-T30"></view>
				<view class="fn_three_one display  displaycenter_aliem M-T24" @click="changeTime(3)">
					<span class="fn_ttx1 M-L24">资质有效期</span>
					<input type="text" style="margin-right: 50rpx;" v-model="timeList.time3" class="input"
						placeholder="年/月/日" :disabled="true" placeholder-class="plc_class" />
					<uni-icons type="calendar-filled" color="#000" size="24" style="margin-right: 24rpx;"></uni-icons>
				</view>

			</view>
		</view>
		<!-- 按钮 -->
		<view class="fn_btn display  width-100 all_item" style="padding-top: 40rpx;padding-bottom: 40rpx;">
			<button class="my_btn display  all_item" @click="submit">提交</button>
		</view>
		<u-picker @confirm="confirm1" @cancle="show= false" :show="show1" :columns="columns"></u-picker>
		<u-datetime-picker :show="show" v-model="value1" mode="date" @cancel="show=false"
			@confirm="confirm"></u-datetime-picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				index: 1,
				show: false,
				show1: false,
				value1: '',
				selectIndex: 0,
				columns: [
					['身份证', '港澳身份证']
				],
				arr: ['汽修', '洗美站', '加油站', '4S店', '其他'],
				cardr: '',
				cardg: '',
				timeList: {
					time1: '',
					time2: '',
					time3: ''
				},
				radiolist3:[],
				infos: {
					farenName: '', //法人姓名zhengjianTyp
					zhengjianType: '身份证', //证件类型
					cardId: '', //证件号码
					qiyeName:'',//企业名称
					qiyeCode:'',//企业代码
					qiyeAddress:'',//企业地址
					zhizhiName:'',//资质名称
					xukezhengBian:'',//许可证编号
					zhizhaozhengmian: '', //执照正面图片
					zhizhizhnegmian: '', //资质正面照片
				}
			}
		},
		onLoad() {
			// 获取行业列表
			this.getHangyeList()
		},
		methods: {
			getHangyeList(){
				let data = {
					pageSize:20,
					pageNum:1
				}
				this.$req.get('/xcx/companyType/list',data).then(res=>{
					console.log(res)
					if(res.data.code!=200){
						this.$modal.msg(res.data.msg);
						return false;
					}
					this.radiolist3 = res.data.rows;
					
				})
			},
			changeTime(e) {
				//e 1 2 3资质有效期
				this.show = true;
				// console.log(e)
				this.index = e
			},
			confirm(e) {
				console.log(e)
				if (this.index == 3) {
					this.timeList.time3 = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				} else if (this.index == 2) {
					this.timeList.time2 = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				} else {
					this.timeList.time1 = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				}

				this.show = false;
			},
			confirm1(e){
				
				this.infos.zhengjianType = e.value[0];
				this.show1 = false
			},
			// 上传身份证照片 以及其他照片
			async addImg(index) {

				let that = this
				// if(index==)  index 1身份证人像页 2 国徽页
				uni.chooseImage({
					success: async (res) => {
						this.$modal.loading('加载中');
						let imglist = res.tempFilePaths;
						console.log(imglist)
						// return false
						let res1 = await that.sendImg(imglist[0], index);
						// console.log(res1)
					}
				})
			},
			submit() {
				if(this.caller=='' || this.cardg==''){
					this.$modal.msg('身份证正反面照片为空!');
					return false;
				}
				if(this.infos.farenName ==''){
					this.$modal.msg('法人姓名为空!');
					return false;
				}
				if(this.infos.cardId ==''){
					this.$modal.msg('证件号码为空!');
					return false;
				}
				if(this.timeList.time1 =='' ){
					this.$modal.msg('证件有效期为空!');
					return false;
				}
				if(this.timeList.time2 =='' ){
					this.$modal.msg('企业有效期为空!');
					return false;
				}
				if(this.timeList.time2 =='' ){
					this.$modal.msg('资质有效期为空!');
					return false;
				}
				if(this.infos.zhizhaozhengmian==''){
					this.$modal.msg('执照正面照片为空!');
					return false;
				}
				if(this.infos.qiyeName==''){
					this.$modal.msg('企业名称为空!');
					return false;
				}
				if(this.infos.qiyeAddress==''){
					this.$modal.msg('企业地址为空!');
					return false;
				}
				if(this.infos.qiyeCode==''){
					this.$modal.msg('企业代码为空!');
					return false;
				}
				if(this.infos.zhizhizhnegmian==''){
					this.$modal.msg('资质正面照片为空!');
					return false;
				}
				if(this.infos.zhizhiName==''){
					this.$modal.msg('资质名称为空!');
					return false;
				}
				if(this.infos.xukezhengBian==''){
					this.$modal.msg('许可证编号为空!');
					return false;
				}
				this.$modal.loading('加载中')
				let data = {
					manageType:this.radiolist3[this.selectIndex].companyType,//经营类型
					idFaceUrl:this.cardr,//身份证人像照片
					idBackUrl:this.cardg,//身份整国徽照片
					legalName:this.infos.farenName,//法人名称
					certificateType:this.infos.zhengjianType=='身份证' ?0 :1,//证件类型//身份证0
					idNumber:this.infos.cardId,//身份证号
					validPeriod:this.timeList.time1,//有效期
					licenceUrl:this.infos.zhizhaozhengmian,//营业执照图片地址
					companyName:this.infos.qiyeName,//企业名称
					companyCode:this.infos.qiyeCode,//企业代码
					companyValidPeriod:this.timeList.time2,//企业有效期
					companyAdress:this.infos.qiyeAddress,//企业地址
					aptitudeUrl:this.infos.zhizhizhnegmian,//行业资质图片地址
					licenseNum:this.infos.xukezhengBian,//许可证编号
					licenseNumValidPeriod:this.timeList.time3,//资质有效期
				}
				console.log(data)
				this.$req.post('/xcx/companyCertification',data).then(res=>{
					console.log(res)
					this.$modal.closeLoading()
					if(res.data.code==200){
						this.$modal.msg(res.data.msg);
						setTimeout(()=>{
							this.$tab.navigateTo('/packageC/successSubmit/successSubmit');
						},300)
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
				
			},
			sendImg(url, index) {
				return new Promise(resolve => {
					this.$req.uploadImg(url).then(res => {
						console.log(res)
						if (res.code != 200) {
							this.$modal.msg(res.msg);
							this.$modal.closeLoading()
							return false;
						}
						if (index) {
							console.log(index)
							if (index == 1) {
								this.cardr = res.data.url;
								this.$modal.closeLoading()
							} else if (index == 2) {
								this.cardg = res.data.url;
								this.$modal.closeLoading()
							} else if (index == 3) {
								this.infos.zhizhaozhengmian = res.data.url;
								this.$modal.closeLoading();
							} else {
								this.infos.zhizhizhnegmian = res.data.url;
								this.$modal.closeLoading();
							}
							resolve(res.data.url)
						} else {
							setTimeout(() => {
								resolve(res.data.url)
							}, 5000)
						}
					})
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.fn_one {
		text-align: left;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.fn_txt1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.fn_txt2 {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.fn_txt3 {
		font-size: 24rpx;
	}

	.imagesss {
		width: 63rpx;
		height: 63rpx;
	}

	.fn_one_one {
		width: 96rpx;
		height: 42rpx;
		background: #126BC9;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.info-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.info-desc {
		font-size: 28rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.one-pic {
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;

		image {
			margin-bottom: 20rpx;
			width: 300rpx;
			height: 200rpx;
		}
	}

	.fn_two {
		text-align: left;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.fn_three {
		width: 690rpx;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

	}

	.fn_ttx1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000
	}

	.plc_class {
		font-weight: 400;
		font-size: 28rpx;
		color: #72778A;
	}

	.input {
		font-weight: 400;
		font-size: 28rpx;
		color: #000;
		text-align: left;
	}

	.fengexian {
		width: 642rpx;
		height: 0rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		border: 2rpx solid #F6F6F6;
	}

	.fn_three_one {
		justify-content: space-between;
	}

	.fn_four {
		width: 690rpx;
		height: 400rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}

	.fnx_ttx1 {
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
	}

	.fnx_ttx2 {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.fn_four_images {
		width: 642rpx;
		height: 246rpx;
		background: #EFEFEF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.fnx_ttx3 {
		font-weight: 400;
		font-size: 24rpx;
		color: #72778A;
	}

	.my_btn {
		width: 690rpx;
		height: 66rpx;
		background: #126BC9;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
	}
</style>